<template>
  <!-- 头部导航 -->
  <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="back" />

  <van-tree-select v-model:main-active-index="activeIndex" height="90vh" :items="typelist" @click-nav="changeType">
    <template #content>
      <div class="aui-flex-links" v-if="prolist.length > 0">
        <router-link v-for="item in prolist" :key="item.id"
          :to="{ path: '/product/info', query: { proid: item.id } }" class="aui-flex-links-item">
          <div class="aui-flex-links-img"><img :src="item.thumb_text" alt="" /></div>
          <div class="aui-flex-links-text">{{ item.name }}</div>
        </router-link>
      </div>
      <div class="aui-flex-links" v-else>
        <div style="color: #c8c9cc; text-align: center">暂无商品数据</div>
      </div>
    </template>
  </van-tree-select>


</template>
<script setup>
//相当于vue2 选项式API当中的 this对象
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// 头部返回按钮事件
const back = () => {
  proxy.$router.go(-1)
  return false
}

const typelist = ref([{
  text: "全部",
  id: 0,
  thumb_text: "",
}]);
const prolist = ref([]);
const typeid = ref(0);
const activeIndex = ref(0);
onMounted(() => {
  TypeData();
  getTypeData();
});
// 获取产品数据
const TypeData = async () => {
  var data = {
    typeid: typeid.value,
    flag: 0,
    orderby: "id",
    keywords: "",
  };
  var result = await proxy.$POST({
    url: '/product/tabulation',
    params: data
  });
  if (result.code == 1) {
    prolist.value = result.data;
  }
};
// 获取分类
const getTypeData = async () => {
  var result = await proxy.$POST({
    url: '/product/type',
    params: {}
  });
  if (result.code == 1) {
    result.data.forEach((item) => {
      typelist.value.push({
        text: item.name,
        id: item.id,
        thumb_text: item.thumb_text,
      });
    });
  }
}
const changeType = (index) => {
  typeid.value = typelist.value[index].id;
  TypeData();
};

</script>
<style scoped>
.aui-flex-links {
  padding: 10px 8px;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  margin-top: 15px;
  padding-bottom: 20px;
}

.aui-flex-links-item {
  position: relative;
  float: left;
  padding: 5px 0;
  width: 44%;
  box-sizing: border-box;
  margin: 0 3%;
}

.aui-flex-links-img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.aui-flex-links-img img{
  width: 100%;
  height: 100px;
}
.aui-flex-links-text {
  color: #444;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>